<template>
	<div id="">
		圈子星球
		<p>{{$store.state.user.name}}
			积分：{{$store.state.user.score}} <br>
			{{$store.state.num}}
			<br>
			等级：{{$store.getters.level}}
		</p>
		<!-- $store.commit方法调用mutations里面的 SET_SCORE方法并传入参数 100-->
		<button @click="$store.commit('SET_SCORE',100)">
			改变积分为100
		</button>
		<!-- 不建议这样 -->
		<!-- <button @click="$store.state.num=50">直接改变50</button> -->
		<!-- 在任意组件都可以访问Store状态中的数据 -->
		<br>
		<hr>
		<!-- dispatch方法执行 actions中的changeScore方法并传入参数2000 -->
		<button @click="$store.dispatch('changeScore',1000)"> 等待5秒把分数改变1000</button>
		<br><br><br><br>
		<input type="text" v-model="message">
		<button type="button" v-clipboard:copy="message" v-clipboard:success="onCopy"
			v-clipboard:error="onError">复制</button>

		<button @click="copy">
			复制2
		</button>
		<!-- 使用组件 -->
		<van-cell title="选择单个日期" :value="date" @click="show = true" />
		<van-calendar v-model="show" @confirm="onConfirm" />
		<!-- <van-area title="请选择" :area-list="areaList" value="410100"  @confirm="comHd($event)" /> -->
		<div style="width:100%; padding: 50px;">
			<mt-range v-model="rangeValue" :min="1" :max="100" :step="1" :bar-height="5"></mt-range>
		</div>
		<mt-search v-model="value"></mt-search>
	</div>
</template>
<script>
	// 00 安装 npm i vant@latest-v2 -S
	// 01 导入vue
	import Vue from 'vue';
	// 02 导入需要的部分组件
	import {Calendar,Cell,Area} from 'vant';
	// 03 使用组件
	Vue.use(Calendar);
	Vue.use(Cell);
	Vue.use(Area);
	// 导入组件的css
	import 'vant/lib/calendar/style';
	import 'vant/lib/cell/style';
	import 'vant/lib/area/style';
	// 导入省市区数据
	import {
		areaList
	} from '@vant/area-data';
	// console.log({...areaList}," areaList");
	// 01 安装 npm install mint-ui -S
	import {Search,	Range} from 'mint-ui';
	// 02 导入css
	import 'mint-ui/lib/style.css' //(没有也可以去node_modules去找)(全部css导入)
	import 'mint-ui/lib/search/style.css' //(按需css导入)
	// 注册称为全局组件
	Vue.component(Search.name, Search)
	export default {
		components: {
			// [Search.name]: Search,
			// 注册成为局部组件（在当前.vue文件才能使用）
			[Range.name]: Range
		},
		data: function() {
			return {
				message: '中华人民共和国万岁！',
				date: '',
				show: false,
				areaList,
				rangeValue: 80,
			}
		},
		methods: {
			comHd(e) {
				console.log(e);
			},
			formatDate(date) {
				return `${date.getMonth() + 1}/${date.getDate()}`;
			},
			onConfirm(date) {
				this.show = false;
				this.date = this.formatDate(date);
			},
			copy() {
				this.$copyText(this.message)
					.then(() => {
						this.$toast.show("复制成功2")
					})
			},
			onCopy: function() {
				this.$toast.show("拷贝成功")
			},
			onError: function() {
				alert('Failed to copy texts')
			}
		}
	}
</script>

<style>
</style>
